<template>
	<view>
		<view class="display">
			<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
			<view class="display-info">
				<view class="display-info-price flex-between">
					<label>￥1500.00</label>
					<view class="flex-between" v-if="type=='group'||type=='discount'">
						<view class="display-info-price-group buttonCenter">{{type=='group'?'拼团':'抢购'}}倒计时</view>
						<view style="margin-left: 10upx;font-size: 32upx;font-weight: bold;color: #FF5353;">06:30:00</view>
					</view>
				</view>
				<view class="display-info-title">西捷西班牙伊比利亚黑猪肉带骨猪里脊</view>
				<view class="flex-between" style="align-items: flex-end;margin-top: 10upx;">
					<view class="display-info-desc">西班牙黑猪肉带骨猪里脊肉 新鲜猪排</view>
					<view class="display-info-count">销量1000+</view>
				</view>
			</view>
		</view>
		<view class="server flex-around">
			<view class="buttonCenter" style="width: 68upx;height: 34upx;background: #FFB758;border-radius: 4upx;">服务</view>
			<view class="server-label flex-between">
				<image src="../../static/yun.png" mode="aspectFill"></image>
				<label class="server-label-text">运费特惠</label>
			</view>
			<view class="server-label flex-between">
				<image src="../../static/tui.png" mode="aspectFill"></image>
				<label class="server-label-text">无忧退货</label>
			</view>
			<view class="server-label flex-between">
				<image src="../../static/you.png" mode="aspectFill"></image>
				<label class="server-label-text">直邮送达</label>
			</view>
		</view>
		<view class="group-info" v-if="type=='group'">
			<view class="group-info-title flex-between">
				<label>3人正在拼单，可直接参与</label>
				<label style="font-size: 24upx;font-weight: 500;color: #666666;" @click="showGroupInfo=true">查看更多</label>
			</view>
			<view class="group-info-item flex-between">
				<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
				<view class="flex-between" style="font-size: 28upx;font-weight: 500;color: #666666;">	
					<label>还差<label style="color: #DD524D;">1人</label>拼成</label>
					<button class="group-info-item-button clear-button buttonCenter" @click="goGroup">去拼单</button>
				</view>
			</view>
			<view class="group-info-item flex-between">
				<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
				<view class="flex-between" style="font-size: 28upx;font-weight: 500;color: #666666;">	
					<label>还差<label style="color: #DD524D;">1人</label>拼成</label>
					<button class="group-info-item-button clear-button buttonCenter" @click="goGroup">去拼单</button>
				</view>
			</view>
		</view>
		<van-action-sheet :show="showGroupInfo" title="拼团名单" @cancel="showGroupInfo=false" @click-overlay="showGroupInfo=false" @close="showGroupInfo=false" >
			<view class="group-info">
				<view class="group-info-item flex-between">
					<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
					<view class="flex-between" style="font-size: 28upx;font-weight: 500;color: #666666;">	
						<label>还差<label style="color: #DD524D;">1人</label>拼成</label>
						<button class="group-info-item-button clear-button buttonCenter" @click="goGroup">去拼单</button>
					</view>
				</view>
				<view class="group-info-item flex-between">
					<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
					<view class="flex-between" style="font-size: 28upx;font-weight: 500;color: #666666;">	
						<label>还差<label style="color: #DD524D;">1人</label>拼成</label>
						<button class="group-info-item-button clear-button buttonCenter" @click="goGroup">去拼单</button>
					</view>
				</view>
				<view class="group-info-item flex-between">
					<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
					<view class="flex-between" style="font-size: 28upx;font-weight: 500;color: #666666;">	
						<label>还差<label style="color: #DD524D;">1人</label>拼成</label>
						<button class="group-info-item-button clear-button buttonCenter" @click="goGroup">去拼单</button>
					</view>
				</view>
			</view>
		</van-action-sheet>
		<view class="info">
			<image src="https://img.alicdn.com/imgextra/i1/322920653/O1CN01uoP0jw1Gh7Eh7NkcX_!!322920653.jpg" mode="widthFix"></image>
		</view>
		<view class="footer">
			<view class="footer-content flex-between">
				<view class="flex-column-center" style="width: 140upx;height: 100%;">
					<image style="width: 48upx;height: 48upx;" src="../../static/star.png" />
					<label>收藏</label>
				</view>
				<view v-if="type=='normal'||type=='discount'" class="buttonCenter" style="width: 303upx;border: 1upx solid #FBC241;height: 96upx;font-size: 32upx;font-weight: bold;color: #FBC241;">加入购物车</view>
				<view v-else class="buttonCenter" style="width: 303upx;border: 1upx solid #FBC241;height: 98upx;font-size: 32upx;font-weight: bold;color: #FBC241;">单独购买</view>
				<view class="buttonCenter" style="background: #FBC241;width: 305upx;height: 100%;font-size: 32upx;color: #FFFFFF;" v-text="type=='normal'?'立即购买':(type=='group'?'立即开团':'立即抢购')" @click="goTo('/pages/order/index')"></view>
			</view>
		</view>
		<view class="footer-seat">
			<view style="height: 98upx;"></view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				type:'normal',
				showGroupInfo:false
			}
		},
		onLoad(param){
			const that=this;
			//that.type=param.type;
		},
		methods:{
			//点击拼团
			goGroup(){
				uni.showModal({
					title:'提示',
					content:'仅剩一个名额，是否立即拼团'
				});
			}
		}
	}
</script>

<style>
	page{
		background: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.display{
		image{
			width: 750upx;
			height: 560upx;
		}
		.display-info{
			padding: 30upx;
			background-color: #FFFFFF;
			.display-info-price{
				font-size: 40upx;
				font-weight: bold;
				color: #FF4646;
				.display-info-price-group{
					width: 158upx;
					height: 44upx;
					background: #FF5353;
					border-radius: 10upx;
					font-size: 24upx;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
			.display-info-title{
				margin-top: 20upx;
				font-size: 32upx;
				font-weight: bold;
				color: #333333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.display-info-desc{
				font-size: 24upx;
				font-weight: 500;
				color: #666666;
			}
			.display-info-count{
				font-size: 24upx;
				font-weight: 500;
				color: #FF5353;
			}
		}
	}
	.server{
		margin: 20upx 0;
		padding: 30upx;
		font-size: 24upx;
		font-weight: 500;
		color: #FFFFFF;
		background-color: #FFFFFF;
		.server-label{
			width: 138upx;
			height: 32upx;
			image{
				width: 32upx;
				height: 32upx;
			}
			.server-label-text{
				color: #666666;
			}
		}
	}
	.group-info{
		padding: 30upx;
		background-color: #FFFFFF;
		.group-info-title{
			font-size: 28upx;
			font-weight: bold;
			color: #333333;
		}
		.group-info-item{
			height: 60upx;
			padding: 10upx 30upx;
			image{
				height: 60upx;
				width: 60upx;
				border-radius: 50%;
			}
		}
		.group-info-item-button{
			margin-left: 20upx;
			width: 120upx;
			height: 48upx;
			background: #FF5353;
			border-radius: 10upx;
			font-size: 28upx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	.info{
		margin-top: 20upx;
		padding: 30upx;
		background-color: #FFFFFF;
		image{
			width: 100%;
		}
	}
	.footer{
		position: fixed;
		bottom: 0;
		background: #FFFFFF;
		.footer-content{
			height: 98upx;
			font-size: 24upx;
			font-weight: 500;
			color: #666666;
		}
	}
</style>
